<template>
  <view class="container">
    <!-- Scrollable Cards Section -->
    <scroll-view class="scrollable-cards" scroll-y>
      <view class="item-card">
          <view class="trip-title">
            <view class="trip-title-text-container">  
              <text>{{card.plan_title}}</text>
              <view class="title-bottom-line"></view>
            </view>
            <view class="trip-title-right-space"></view>
          </view>
          
          <view class="station-line-container">
            <image src="@/static/jiaotongguihua/train.svg" class="train-icon"></image>
            <view v-for="(station, index) in card.stations" :key="index" class="station-container" @click="switchTab(`/pages/zhixun/index?station=${station.station}`)">
              <text class="station-name" >{{station.station}}</text>
              <view v-if="index < card.stations.length - 1" class="site-between-line"></view>
            </view>
          </view>
          
          <view class="map-container">
            <map :ref="mapRef" :markers="covers"  :show-location="true" :include-points="includePoints">
            </map>
          </view>

          <view class="item-title">
            <view class="trip-title-text-container">  
              <text>行程简介</text>
              <view class="title-bottom-line"></view>
            </view>
            <view class="trip-title-right-space"></view>
          </view>

          <!-- 行程亮点 -->
          <view class="highlights">
            <text class="highlight-text">{{card.plan_description}}</text>
          </view>
          
          
          <!-- 适合人群 -->
          <view class="suitable-crowd">
            <view class="tags">
              <text class="tag">{{card.suitableCrowd}}</text>
            </view>
          </view>


          <!-- 每日行程 -->
          <view class="item-title">
            <view class="trip-title-text-container">  
              <text>每日行程</text>
              <view class="title-bottom-line"></view>
            </view>
            <view class="trip-title-right-space"></view>
          </view>

          <!-- 加载中状态 -->
          <view v-if="!schedules.length" class="daily-schedule">
            <view class="schedule-item-left">
              <view class="left-vertical-line-top-hidden"></view>
              <view class="left-point"></view>
              <view class="left-vertical-line-bottom"></view>
            </view>

            <view class="schedule-item-right">
              <view class="daily-schedule-item-title">
                <text>加载中...</text>
              </view>
              <view class="daily-schedule-item">
                <view class="daily-schedule-item-time-content">
                  <text>正在为您生成行程...</text>
                </view>
              </view>
            </view>
          </view>
          <view v-else v-for="(schedule, index) in schedules" :key="index" class="daily-schedule">
            <view class="schedule-item-left">
              <view class="left-vertical-line-top-hidden"></view>
              <view class="left-point"></view>
              <view class="left-vertical-line-bottom"></view>
            </view>

            <view class="schedule-item-right">
              <view class="daily-schedule-item-title">
                <text>{{schedule.summary}}</text>
              </view>
              <view class="daily-schedule-item">
                <view v-for="(activity, index) in schedule.activities" :key="index" class="daily-schedule-item-time-content">
                  <text style="color: #555;">【{{activity.time}}】{{activity.activity}}</text>
                  <text style="color: #f08a5d;">{{activity.tips}}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
    </scroll-view>
    <view class="bottom-bar">
      <view class="bottom-bar-left" @click="goBack">
        <text>返回</text>
      </view>
      <button class="bottom-bar-right" :loading="isRefreshing" @click="loadPlanDetails">
        {{ isRefreshing == true ? '生成中...' : '重新生成' }}
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

// const card = JSON.parse(decodeURIComponent(route.query.card))

const dateRange = ref(uni.getStorageSync('dateRange') || '')
const budget = ref(uni.getStorageSync('budget') || '')
const departureCity = ref(uni.getStorageSync('departureCity') || '')
const card = ref(uni.getStorageSync('card') || '')
const latitude = ref(36.675807);
const longitude = ref(117.119997);
const mapRef = ref(null);
const schedules = ref([])
// const schedules = ref([{
// 					summary: 'DAY1|北京乘坐飞机前往济南，市区游玩，游览大明湖，感受大明湖的美丽风光',
// 					activities:[
//               {
//                   "time":"07:00-11:00",
//                   "activity":"乘坐飞机前往济南，市区游玩",
//                   "tips":"建议提取2小时到达机场，提前1小时办理登机手续"
//               },
//               {
//                   "time":"12:30-20:00",
//                   "activity":"游览大明湖，感受大明湖的美丽风光",
//                   "tips":"一定要去品尝济南的特色小吃，如煎饼果子、油条、豆腐脑等"
//               },
//           ]
// 				}])

const isRefreshing = ref(false)
const covers = ref([
  // {
  //   latitude: 34.810487,
  //   longitude: 117.323725,
  //   width: 30,
  //   height: 30,
  //   iconPath: '/static/jiaotongguihua/location.svg'
  // },
  // {
  //   latitude: 36.675807,
  //   longitude: 117.000923,
  //   width: 30,
  //   height: 30,
  //   iconPath: '/static/jiaotongguihua/location.svg'
  // },  
  // {
  //   latitude: 37.509691,
  //   longitude: 122.116394,
  //   width: 30,
  //   height: 30,
  //   iconPath: '/static/jiaotongguihua/location.svg'
  // }
]);
const includePoints = ref([
  // {
  //   latitude: 34.810487,
  //   longitude: 117.323725,
  // },
  // {
  //   latitude: 36.675807,
  //   longitude: 117.000923,
  // },  
  // {
  //   latitude: 37.509691,
  //   longitude: 122.116394,
  // }
]);
const station_list = {
  "济南": {latitude: 36.675807, longitude: 117.000923},
  "泰山": {latitude: 36.19411, longitude: 117.13446},
  "磁窑": {latitude: 35.90, longitude: 117.11},
  "兖州": {latitude: 35.55, longitude: 116.78},
  "邹城": {latitude: 35.40, longitude: 117.01},  
  "枣庄西": {latitude: 34.79, longitude: 117.25},
  "滕州": {latitude: 35.11, longitude: 117.17},
  "淄博": {latitude: 36.81, longitude: 118.05},
  "潍坊": {latitude: 36.71, longitude: 119.16},
  "蓝村": {latitude: 36.39, longitude: 120.18},
  "莱阳": {latitude: 36.98, longitude: 120.71},
  "威海": {latitude: 37.50, longitude: 122.11},
  "陵城": {latitude: 37.34, longitude: 116.58},
  "临邑": {latitude: 37.19, longitude: 116.87},
  "阳信": {latitude: 37.63, longitude: 117.60},
  "利津南": {latitude: 37.41, longitude: 118.17},
  "东营": {latitude: 37.43, longitude: 118.67},
  "大明湖": {latitude: 36.68, longitude: 117.02},
  "文登": {latitude: 37.20, longitude: 122.00},
  "乳山": {latitude: 36.88, longitude: 121.55},
  "即墨北": {latitude: 36.40, longitude: 120.40},
  "胶州": {latitude: 36.26, longitude: 120.03},
  "诸城": {latitude: 36.01, longitude: 119.41},
  "五莲": {latitude: 35.75, longitude: 119.21},
  "莒县": {latitude: 35.58, longitude: 118.87},
  "沂南": {latitude: 35.55, longitude: 118.47},
  "临沂": {latitude: 35.10, longitude: 118.36},
  "费县": {latitude: 35.27, longitude: 117.98},
  "平邑": {latitude: 35.52, longitude: 117.62},
  "曲阜": {latitude: 35.59, longitude: 116.99},
  "济宁": {latitude: 35.40, longitude: 116.59},
  "巨野": {latitude: 35.38, longitude: 116.08},
  "菏泽": {latitude: 35.23, longitude: 115.50},
  "聊城": {latitude: 36.45, longitude: 115.97},
  "齐河": {latitude: 36.79, longitude: 116.76},
  "商河": {latitude: 37.31, longitude: 117.16},
}

onMounted(() => {
  // 计算所有坐标点的平均值作为地图中心点
  let totalLat = 0;
  let totalLng = 0;
  covers.value.forEach(cover => {
    totalLat += cover.latitude;
    totalLng += cover.longitude;
  });
  
  card.value.stations.forEach(station => {
    console.log("station:", station,station_list[station.station])
    var lat = station_list[station.station].latitude
    var lng = station_list[station.station].longitude
    console.log("station", station.station, lat, lng)
    covers.value.push({
      latitude: lat,
      longitude: lng,
      width: 30,
      height: 30,
      iconPath: '/static/jiaotongguihua/location.svg'
    })
    includePoints.value.push({
      latitude: lat,
      longitude: lng,
    })
  })
  loadPlanDetails()
});

const goBack = () => {
  uni.navigateBack();
}

const switchTab = (url) => {
  uni.switchTab({
    url: url
  })
}

function loadPlanDetails() {
    console.log('loadPlanDetails')
		if (isRefreshing.value) return; // 防止重复点击
		isRefreshing.value = true;

		// 显示更新提示
		uni.showToast({
			title: '正在生成行程...',
			icon: 'none'
		});

		// Call the API to get dynamic topic recommendations
		uni.request({
			url: 'https://tushuoit.com/api/ju/deepseek/chat',
			method: 'POST',
			data: {
			apiKey: "juxianwenlv",
			model: 'deepseek-r1-distill-qwen-32b',
			prompt: `
			# 角色
			你是一个经验丰富的旅游规划师，擅长根据游客的需求和偏好，为他们提供个性化的旅游行程建议。
			
			# 任务
			游客将从他的出发地前往山东境内，在山东境内将乘坐旅游专列停靠【${card.value.stations}】这几个站点游玩，请为游客生成每日行程计划，返回JSON格式。
			## 用户信息
			- 出发地：${departureCity.value}
			- 计划日期：${dateRange.value}
			- 预算：${budget.value}
      - 游客旅游将要停靠的站点：${card.value.stations}
			## 返回JSON包含：
			- summary（当天行程的简要描述，不超过20字）
			- activities（当天行程的详细内容，返回JSON格式）
      - activity(活动内容，比如：游览大明湖，感受大明湖的美丽风光)
      - tips(活动提示，比如注意事项，必打卡的地方，美食推荐，交通推荐，不可超过50字)
			
      ## 要求
      - 时间规划：精确到30分钟单位，考虑车站进出站时间（建议预留20分钟），充分考虑游玩时间，休息时间，交通时间，充分考虑游客的体验感
      - 为每个停靠站推荐Top2景点，标注与用户画像的契合点
      - 时空约束算法：提示AI计算"景点开放时间（9:00-17:00）与高铁到站时间的匹配度"
      - 动线优化：要求"相邻景点按地理位置自动聚类，减少折返路程"
      - 个性化排序：添加指令"优先展示含{用户兴趣标签}的景点，同类选项按评分降序排列"
      - 实时要素：补充"若出发时间为节假日，自动增加15%的行程缓冲时间"

			## 旅游专列站点信息
			#### 1. 济南—枣庄西线（6站）

      | 站点     | 发车时间 | 备注                     |
      |----------|----------|--------------------------|
      | 济南     | 08:00    | 始发站                   |
      | 泰山     | 09:10    | 停靠20分钟（游览衔接）   |
      | 磁窑     | 10:00    | 停靠15分钟               |
      | 兖州     | 11:00    | 停靠30分钟（换乘衔接）   |
      | 邹城     | 11:50    | 停靠20分钟               |
      | 枣庄西   | 13:10    | 终点站（含午餐时间安排） |

      ---

      #### 2. 枣庄西—威海线（11站）

      | 站点     | 发车时间 | 备注                     |
      |----------|----------|--------------------------|
      | 枣庄西   | 07:30    | 始发站                   |
      | 滕州     | 08:10    | 停靠10分钟               |
      | 邹城     | 08:40    | 停靠15分钟               |
      | 兖州     | 09:20    | 停靠20分钟               |
      | 泰山     | 10:30    | 停靠30分钟（游览衔接）   |
      | 济南     | 12:00    | 停靠60分钟（午餐）       |
      | 淄博     | 13:50    | 停靠20分钟               |
      | 潍坊     | 15:10    | 停靠30分钟（换乘衔接）   |
      | 蓝村     | 16:20    | 停靠10分钟               |
      | 莱阳     | 17:30    | 停靠15分钟               |
      | 威海     | 19:00    | 终点站（含晚餐安排）     |

      ---

      #### 3. 陵城—济南线（9站）

      | 站点     | 发车时间 | 备注                     |
      |----------|----------|--------------------------|
      | 陵城     | 07:00    | 始发站                   |
      | 临邑     | 07:40    | 停靠10分钟               |
      | 阳信     | 08:30    | 停靠15分钟               |
      | 利津南   | 09:20    | 停靠10分钟               |
      | 东营     | 10:00    | 停靠30分钟（游览衔接）   |
      | 淄博     | 11:30    | 停靠20分钟               |
      | 大明湖   | 13:00    | 停靠60分钟（午餐+游览）  |
      | 济南     | 14:30    | 终点站                   |

      ---

      #### 4. 威海—陵城线（28站）

      | 站点     | 发车时间 | 备注                         |
      |----------|----------|------------------------------|
      | 威海     | 06:30    | 始发站                       |
      | 文登     | 07:10    | 停靠5分钟                    |
      | 乳山     | 07:50    | 停靠10分钟                   |
      | 莱阳     | 08:40    | 停靠15分钟                   |
      | 即墨北   | 09:50    | 停靠10分钟                   |
      | 胶州     | 10:20    | 停靠10分钟                   |
      | 诸城     | 11:10    | 停靠15分钟（换乘衔接）       |
      | 五莲     | 11:50    | 停靠10分钟                   |
      | 莒县     | 12:30    | 停靠15分钟（午餐准备）       |
      | 沂南     | 13:10    | 停靠10分钟                   |
      | 临沂     | 13:50    | 停靠60分钟（午餐+游览）      |
      | 费县     | 15:10    | 停靠10分钟                   |
      | 平邑     | 15:50    | 停靠15分钟                   |
      | 曲阜     | 16:40    | 停靠40分钟（三孔景区）       |
      | 兖州     | 17:40    | 停靠20分钟                   |
      | 济宁     | 18:20    | 停靠15分钟                   |
      | 巨野     | 19:10    | 停靠10分钟                   |
      | 菏泽     | 19:50    | 停靠20分钟                   |
      | 聊城     | 21:20    | 停靠30分钟（晚餐）           |
      | 齐河     | 23:00    | 停靠10分钟                   |
      | 大明湖   | 23:40    | 停靠15分钟（夜间换乘）       |
      | 淄博     | 次日00:50| 停靠10分钟                   |
      | 东营     | 02:10    | 停靠15分钟                   |
      | 利津南   | 03:00    | 停靠5分钟                    |
      | 阳信     | 03:40    | 停靠10分钟                   |
      | 商河     | 04:20    | 停靠5分钟                    |
      | 临邑     | 05:00    | 停靠10分钟                   |
      | 陵城     | 06:00    | 终点站（全程约23.5小时）     |

      ---

					# 输出示例
				[{
					summary: 'DAY1|北京乘坐飞机前往济南，市区游玩',
					activities:[
              {
                  "time":"07:00-11:00",
                  "activity":"(活动内容，比如：乘坐飞机前往济南，市区游玩)",
                  "tips":"(活动提示，不可超过50字)"
              },
              {
                  "time":"12:30-20:00",
                  "activity":"(活动内容，比如：游览大明湖，感受大明湖的美丽风光)",
                  "tips":"(活动提示，不可超过50字)"
              },
          ]
				},
        {
					summary: 'DAY2|xxx',
					activities:[
              {
                  "time":"07:00-09:00",
                  "activity":"xx",
                  "tips":"xxx"
              },
              {
                  "time":"09:10-12:00",
                  "activity":"xx",
                  "tips":"xxx"
              },
          ]
				},
				...
				]

					`
			},
			success: (res) => {
			console.log('API response:', res.data);
      
			try {
				// Parse the response based on the specific Deepseek API structure
				if (res.data && res.data.choices && res.data.choices.length > 0) {
				const content = res.data.choices[0].message.content;

				// Extract JSON from the content (may contain markdown code blocks)
				const jsonMatch = content.match(/```json\s*([\s\S]*?)\s*```/) ||
					content.match(/\[\s*\{[\s\S]*\}\s*\]/);

				if (jsonMatch) {
					// Use the extracted JSON string
					const jsonStr = jsonMatch[1] || jsonMatch[0];
					const parsedData = JSON.parse(jsonStr);

					if (Array.isArray(parsedData)) {
						schedules.value = parsedData;
					  console.log('Successfully parsed topics:', parsedData);
					}
				} else {
					throw new Error('Could not extract JSON from API response');
				}
				} else {
				throw new Error('Unexpected API response format');
				}
			} catch (error) {
				console.error('Failed to parse API response:', error);
				// Fallback to local data
				
			}

			// Complete the refresh process
			isRefreshing.value = false;

			uni.showToast({
				title: 'AI已为您生成行程卡片',
				icon: 'none',
				duration: 1500
			});
			},
			fail: (err) => {
			console.error('API request failed:', err);
			// Fallback to local data on API failure
			

			// Complete the refresh process
			isRefreshing.value = false;

			uni.showToast({
				title: 'AI已为您生成行程卡片',
				icon: 'none',
				duration: 1500
			});
			}
		});
	}



</script>

<style scoped>
.container {
  height: 100%;
  background-color: #f6f7f9;
  display: flex;
  flex-direction: column;
}

.scrollable-cards {
  flex: 1;
  padding: 30rpx;
  padding-bottom: 200px;
  width: calc(100% - 60rpx);
}

.map-container {
  margin-top: 30rpx;
  height: 400rpx;
}

.map-container map {
  width: 100%;
  height: 100%;
}

.item-card {
	background-color: white;
	border-radius: 20rpx;
  padding-bottom: 20rpx;
	box-shadow: 0 -2px 3px -1px rgba(0, 0, 0, 0.1);
}

.trip-title {
  display: flex;
	font-size: 30rpx;
	font-weight: bold;
	padding: 40rpx 30rpx 0 30rpx;
}

.trip-title-text-container {
  display: flex;
  flex-direction: column;
}
.trip-title-right-space {
  flex: 1;
}

.item-title {
  display: flex;
	font-size: 30rpx;
	font-weight: bold;
  margin-top: 40rpx;
	padding: 0rpx 30rpx 0 30rpx;
}

.title-bottom-line {
	height: 4rpx;
	width: 100%;
	background-color: red;
}

.station-line-container {
	display: flex;
	flex-direction: row;
	/* justify-content: center; */
	align-items: center;
	/* background-color: #f8f0e3; */
	margin: 30rpx 30rpx 0 30rpx;
}

.train-icon {
	width: 50rpx;
	height: 40rpx;
	margin-right: 14rpx;
}

.site-between-line {
	height: 2rpx;
	width: 30rpx;
	background-color: #c5b193;
}

.station-container {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.station-name {
	font-size: 26rpx;
	font-weight: bold;
	color: #fff;
	background-color: #c5b193;
	border-radius: 40rpx;
	padding: 6rpx 20rpx;
}

.highlights {
	margin: 20rpx 30rpx 0 30rpx;
	width: calc(100% - 60rpx);
}
.highlight-text {
	font-size: 26rpx;
	color: #777;
}
.suitable-crowd {
	margin: 20rpx 30rpx 0 30rpx;
	margin-bottom: 40rpx;
	width: calc(100% - 60rpx);
}

.tags {
	display: flex;	
}
.tag {
	background-color: #f8f0e3;
	font-size: 12px;
	color: #333;
	padding: 5px 10px;
	border-radius: 20rpx;
	margin-right: 10rpx;
}

.daily-schedule {
  display: flex;
  flex-direction: row;
  margin-top: 20rpx;
  padding: 0 30rpx;
}
.schedule-item-left {
  display: flex;
  flex-direction: column;
  
  align-items: center;
  flex-shrink: 0;
}
.schedule-item-right {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
}
.left-vertical-line-top {
  height: 6rpx;
  width: 4rpx;
  background-color: #ed8e40;
}
.left-vertical-line-top-hidden {
  height: 6rpx;
  width: 4rpx;
}

.left-vertical-line-bottom {
  flex: 1;
  width: 4rpx;
  min-height: 0;
  
  background-color: #ed8e40;
}
.left-point {
  width: 20rpx;
  height: 20rpx;
  /* background-color: #ed8e40; */
  border: 4rpx solid #ed8e40;
  border-radius: 50%;
}

.daily-schedule-item {
  display: flex;
  flex-direction: column;
  background-color: #f8f0e3;
  margin-top: 10rpx;
  margin-left: 20rpx;
  padding: 20rpx;
  border-radius: 20rpx;
}
.daily-schedule-item-title {
  font-size: 28rpx;
  font-weight: bold;
  font-style: italic;
  color: #555;
  margin-left: 20rpx;
}
.daily-schedule-item-time-content {
  display: flex;
  flex-direction: column;
  font-size: 26rpx;
  margin-top: 10rpx;
  color: #555;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  width: calc(100% - 40rpx);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20rpx;
}
.bottom-bar-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 1;
  background-color: #ed8e40;
  color: white;
  border-radius: 20rpx;
  margin: 10rpx;
  padding: 20rpx;
}
.bottom-bar-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 1;
  background-color: #ed8e40;
  color: white;
  border-radius: 20rpx;
  margin: 10rpx;
  padding: 20rpx;
}




</style>